<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<table class="layui-hide" id="roleTable" lay-filter="test"></table>

		<!-- 设置css样式默认为隐藏 -->
		<div id="role_edit" style="display:none;margin-top: 20px;">
			<form id="fmEditRole" class="layui-form" lay-filter="updateRole" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="RoleName" name="loginName" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align:center;">
					<button class="layui-btn" id="btnEditRole" lay-filter="btnRoleEdit" lay-submit="">修改</button>
				</div>
			</form>
		</div>

		<!--设置权限-->
		<div id="diaSetRight" style="display: none;" title="设置权限" style="width:300px;height:600px; margin: 10px auto;">
			<table id="tabEdit">
				<tr>
					<td>
						<div id="rightTree"></div>
					</td>
				</tr>
				<tr>
					<td style="text-align: center; padding: 10px;">
						<a id="setRole" href="#" class="layui-btn"><i class="layui-icon">&#xe605;</i>保存设置</a>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['table', 'layer','tree'], function() {
			var table = layui.table; //获取layui的table表格组件, 赋值给table变量
			var layer = layui.layer; //获取layui的layer弹出层组件, 赋值给layer变量
			var $ = layui.$;
			var tree = layui.tree;
			
			//table.render表格渲染
			table.render({ //render渲染
				elem: '#roleTable', //选择要渲染的表格
				toolbar: '#topToolbar',
				height: 500, //表格高度
				width: 475,
				url: globalData.server + 'GetRolesLayUI', //发送请求的地址
				method: 'post', //发送请求的方式  !!!!!
				page: true, //开启分页,在开启分页条之后, 会自动发送limit和page参数
				where: {
					token: globalData.myToken
				},
				cols: [
					[ //表头
						{
							field: 'RowNum',
							title: '序号', //表格中表头的内容
							width: 50, //宽度
							sort: true,
							fixed: 'left'
						}, {
							field: 'Name',
							title: '角色名',
							width: 100
						}, {
							title: '操作',
							toolbar: '#rightToolbar',
							align: "center",
							width: 300
						}
					]
				],
				done: function(res) {
					useData = res.data
				}
			});
			table.on("toolbar(test)", function(obj) {
				switch(obj.event) {
					case "chang":
						layer.open({
							type: 2,
							content: "addJiao.html",
							area: ["450px", "400px"],
						});
						table.reload("roleTable");
						break;
				}
			});

			var roleId; //当前行角色Id
			var windowIndex;
			table.on("tool(test)", function(obj) {
				switch(obj.event) {
					case "sheZhi":
					$.post(globalData.server+"GetModulesByRoleIdLayUI",{
						roleId:obj.data.Id,
						token:globalData.myToken
					},function(res){
						tree.render({
							elem:'#rightTree',
							data:res,
							showCheckbox:true,
							id:"moduleTree"
						});
					},"json");
					windowIndex = layer.open({
						type:1,
						content:$("#diaSetRight"),
						title:"您正在给["+obj.data.Name+"]设置权限",
						area:["350px","500px"]
					});
					break;
					case "bianJi":
						layer.open({
							type: 1,
							content: $("#role_edit"),
							title: "编辑角色",
							success: function() {
								$("#RoleName").val(obj.data.Name)
								roleId = obj.data.Id
							}
						});
						break;
					case "shanChu":
						layer.confirm("确认要删除吗?", {
							icon: 3,
							title: '提示'
						}, function(index) {
							$.post(globalData.server + "DeleteRole", {
								roleId: obj.data.Id,
								token: globalData.myToken
							}, function(res) {
								if(res.success) {
									layer.alert("成功删除");
									table.reload("roleTable");
								} else {
									layer.alert("失败");
								}
							}, "json");
						}, function(index) {
							layer.close(index);
						});
						break;
				}
			});
			
			$("#btnEditRole").click(function() {
				$.post(globalData.server + "UpdateRole", {
					name: $("#RoleName").val(),
					rId: roleId,
					token: globalData.myToken
				}, function(res) {
					if(res.success) {
						alert("修改成功");
					} else {
						alert("修改失败");
					}
				}, "json");
			})
			
			$("#setRole").click(function(){
				var nodes = tree.getChecked("moduleTree");
				for(var i=0;i<nodes.length;i++){
					getChildenId(node[i]);
				}
				$.post(globalData.server+"SetSysRights",{
					parentIds:arr.join(","),
					rId:roleId,
					token:globalData.myToken
				},function(res){
					if (res.success) {
						alert("成功");
					} else{
						alert("失败");
					}
				},"json");
			});

		});
		
		var arr = []; //定义一个数组
		
		//该方法会获得选中所有选中节点的Id, 形成一个数组
		function getChildenId(node) {
			arr.push(node.id);
			//          如果该节点还有儿子
			for(var i = 0; node.children != null && i < node.children.length; i++) {
				getChildenId(node.children[i]);
			}
		}
	</script>
	<script type="text/html" id="topToolbar">
		<div class="layui-btn-container">
			<button type="button" class="layui-btn" lay-event="chang"><i class="layui-icon">&#xe608;</i> 创建角色</button>
		</div>
	</script>
	<script type="text/html" id="rightToolbar">
		<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-event="sheZhi"><i class="layui-icon">&#xe716;设置权限</i></button>
		<button type="button" class="layui-btn layui-btn-xs" lay-event="bianJi"><i class="layui-icon">&#xe642;编辑</i></button>
		<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="shanChu"><i class="layui-icon">&#xe640;删除</i></button>
	</script>

</html>